<template>
  <el-form inline>
    <el-form-item label="一级分类">
      <el-select v-model="value1" @change="clickOne(value1)" :disabled="prop">
        <el-option v-for="oneItem in oneList" :key="oneItem.id" :value="oneItem.id" :label="oneItem.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="value2" @change="clickTwo(value2)" :disabled="prop">
        <el-option v-for="twoItem in twoList" :key="twoItem.id" :value="twoItem.id" :label="twoItem.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="value3" @change="clickThree(value3)" :disabled="prop">
        <el-option v-for="threeItem in threeList" :key="threeItem.id" :value="threeItem.id"
          :label="threeItem.name"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'CategorySelector',
  data() {
    return {
      value1: '',
      value2: '',
      value3: ''
    }
  },
  props:['prop'],
  methods: {
    clickOne(id) {  //获取二级分类
      this.value2 = ''
      this.value3 = ''
      this.$store.dispatch('category/getCategoryList2', id)
    },
    clickTwo(id) {  //获取三级分类
      this.value3 = ''
      this.$store.dispatch('category/getCategoryList3', id)
    },
    clickThree() {  //获取表格数据
      this.$store.dispatch('attrs/getAttrsList', { id1: this.value1, id2: this.value2, id3: this.value3 })
    },
    getOneList() {  //获取一级分类
      this.$store.dispatch('category/getCategoryList1')
    }
  },
  watch: {
    value3: {
      handler() {
        this.$emit('isDisablad',this.value3)
        if (!this.value3) {  //value3是空，清空表格数据
          this.$store.commit('attrs/RESET_ATTRS')
          this.$store.commit('spu/RESET_SPULIST')
        } else {
          this.$store.commit('spu/SET_ID3', this.value3)
          if (this.$route.path === '/form/spu/list') {  //如果是spu页面就发请求获取spu数据
            this.$store.dispatch('spu/getSpuList', { id3: this.value3, page: 1, size: 2 })
          }
        }
      },
      immediate:true
    }
  },
  mounted() {
    this.getOneList()
  },
  computed: {
    ...mapState({
      oneList: (state) => {
        return state.category.getCategoryList1Data
      },
      twoList: (state) => {
        return state.category.getCategoryList2Data
      },
      threeList: (state) => {
        return state.category.getCategoryList3Data
      },
    })
  }
}


</script>
